$(document).ready(function() {
    // 初始化CodeMirror编辑器
    var sqlEditor = CodeMirror.fromTextArea(document.getElementById('sql-editor'), {
        mode: 'text/x-sql',
        theme: 'dracula',
        lineNumbers: true,
        indentWithTabs: true,
        smartIndent: true,
        lineWrapping: true,
        extraKeys: {"Ctrl-Space": "autocomplete"}
    });
    
    // 已加载的表结构缓存
    var tableStructures = {};
    
    // 监听表格复选框变化
    $(document).on('change', '.table-checkbox', function() {
        updateTableStructure();
    });
    
    // 获取表结构信息
    function fetchTableStructure(tableName) {
        if (tableStructures[tableName]) {
            return Promise.resolve(tableStructures[tableName]);
        }
        
        return $.ajax({
            url: '/table/' + tableName,
            method: 'GET',
            dataType: 'json'
        }).then(function(data) {
            tableStructures[tableName] = data;
            return data;
        });
    }
    
    // 更新表结构显示
    function updateTableStructure() {
        var checkedTables = $('.table-checkbox:checked');
        
        if (checkedTables.length === 0) {
            $('#table-structure-card').hide();
            return;
        }
        
        $('#table-structure-card').show();
        var $container = $('#table-structure-container');
        $container.empty();
        
        // 获取每个选中表的结构
        var promises = [];
        checkedTables.each(function() {
            var tableName = $(this).val();
            promises.push(fetchTableStructure(tableName));
        });
        
        Promise.all(promises).then(function(results) {
            for (var i = 0; i < checkedTables.length; i++) {
                var tableName = $(checkedTables[i]).val();
                var structure = results[i];
                
                var $tableStructure = $('<div class="table-structure">');
                $tableStructure.append('<h6>' + tableName + '</h6>');
                
                var $columnList = $('<div class="column-list">');
                structure.forEach(function(column) {
                    var $columnItem = $('<div class="column-item">');
                    $columnItem.append('<span class="column-name">' + column.Field + '</span>');
                    $columnItem.append('<span class="column-type">' + column.Type + 
                                      (column.Key ? ' (' + column.Key + ')' : '') + '</span>');
                    $columnList.append($columnItem);
                });
                
                $tableStructure.append($columnList);
                $container.append($tableStructure);
            }
        });
    }
    
    // 生成SQL按钮点击事件
    $('#generate-btn').on('click', function() {
        var prompt = $('#prompt').val().trim();
        var checkedTables = $('.table-checkbox:checked');
        
        if (!prompt) {
            alert('请输入SQL生成需求');
            return;
        }
        
        if (checkedTables.length === 0) {
            alert('请至少选择一个表');
            return;
        }
        
        var selectedTables = [];
        checkedTables.each(function() {
            selectedTables.push($(this).val());
        });
        
        // 显示加载状态
        var $btn = $(this);
        $btn.prop('disabled', true);
        $btn.html('<span class="spinner"></span>生成中...');
        
        // 发送请求生成SQL
        $.ajax({
            url: '/generate',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                prompt: prompt,
                tables: selectedTables
            }),
            success: function(response) {
                sqlEditor.setValue(response.sql);
                $btn.html('生成SQL');
                $btn.prop('disabled', false);
            },
            error: function(xhr) {
                alert('生成SQL失败: ' + (xhr.responseJSON?.error || xhr.statusText));
                $btn.html('生成SQL');
                $btn.prop('disabled', false);
            }
        });
    });
    
    // 执行SQL按钮点击事件
    $('#execute-btn').on('click', function() {
        var sql = sqlEditor.getValue().trim();
        
        if (!sql) {
            alert('请输入SQL语句');
            return;
        }
        
        // 显示加载状态
        var $btn = $(this);
        $btn.prop('disabled', true);
        $btn.html('<span class="spinner"></span>执行中...');
        
        // 发送请求执行SQL
        $.ajax({
            url: '/execute',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                sql: sql
            }),
            success: function(response) {
                // 恢复按钮状态
                $btn.html('执行SQL');
                $btn.prop('disabled', false);
                
                // 显示结果容器
                $('#result-container').show();
                
                if (response.success) {
                    if (response.data) {
                        // 显示查询结果
                        displayQueryResult(response);
                    } else {
                        // 显示执行结果
                        $('#result-info').html('<div class="alert alert-success">' + 
                                            response.message + '</div>');
                        $('#result-table').hide();
                    }
                } else {
                    // 显示错误信息
                    $('#result-info').html('<div class="alert alert-danger">错误: ' + 
                                        response.error + '</div>');
                    $('#result-table').hide();
                }
            },
            error: function(xhr) {
                // 恢复按钮状态
                $btn.html('执行SQL');
                $btn.prop('disabled', false);
                
                // 显示错误信息
                $('#result-container').show();
                $('#result-info').html('<div class="alert alert-danger">请求失败: ' + 
                                    (xhr.responseJSON?.error || xhr.statusText) + '</div>');
                $('#result-table').hide();
            }
        });
    });
    
    // 显示查询结果
    function displayQueryResult(response) {
        var data = response.data;
        var columns = response.columns;
        
        // 显示结果信息
        $('#result-info').html('<div class="alert alert-info">查询成功，返回 ' + 
                              response.rowCount + ' 条记录</div>');
        
        if (data.length === 0) {
            $('#result-table').hide();
            return;
        }
        
        // 显示表格
        $('#result-table').show();
        
        // 生成表头
        var headerHtml = '<tr>';
        columns.forEach(function(column) {
            headerHtml += '<th>' + column + '</th>';
        });
        headerHtml += '</tr>';
        $('#result-header').html(headerHtml);
        
        // 生成表格内容
        var bodyHtml = '';
        data.forEach(function(row) {
            bodyHtml += '<tr>';
            columns.forEach(function(column) {
                bodyHtml += '<td>' + (row[column] !== null ? row[column] : '<em>null</em>') + '</td>';
            });
            bodyHtml += '</tr>';
        });
        $('#result-body').html(bodyHtml);
    }
    
    // 清空按钮点击事件
    $('#clear-btn').on('click', function() {
        sqlEditor.setValue('');
    });
}); 